<template>
  <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="类目选择">
            <el-button type="primary" @click="openInner">选择类目</el-button>
            <span class="selectLeiMu">{{leimu}}</span>
        </el-form-item>
        <el-form-item label="商品标题">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点">
            <el-input v-model="form.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
            <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
            <el-input v-model="form.num"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
            <el-button type='primary' @click="uploadVisible=true">上传图片</el-button>
            <img :src="form.image" alt="">
            <span>{{form.image}}</span>
        </el-form-item>
        <el-form-item label="商品描述">
            <!-- <el-input v-model="form.desc"></el-input> -->
            <vue-ueditor-wrap v-model="form.desc" :config="myConfig"></vue-ueditor-wrap>
        </el-form-item>
        <!-- 规格参数添加的试图 -->
        <div v-if="guige.paramData">
            <div 
                v-for="(param,index) in JSON.parse(guige.paramData)"
                :key='index'
            >
                <p>{{param.value}}</p>
                <el-form-item 
                    v-for="(e,i) in param.children"
                    :key='i'
                    :label='e.value'
                >
                <el-input v-model="guigecs[e.value]"></el-input>
                
                </el-form-item>
            </div>
        </div>
        <el-form-item>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
          width="50%"
          title="上传图片"
          :visible.sync="uploadVisible"
          append-to-body>
          <uploadImg @getPicUrl='getPicUrl'/>
          <el-button type="primary" @click="uploadVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadVisible = false">确定</el-button>
        </el-dialog>
  </div>
</template>

<script>
import uploadImg from './uploadImg'
export default {
    name:'AddProduct',
    data(){
        return{
            id:'',
            uploadVisible:false,
            form:{
                title:'',
                sellPoint:'',
                price:'',
                num:'',
                desc:'默认的简介',
                image:'',
                cid:''
            },
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 240,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: '/UEditor/'
            },
            guigecs:{}
            
        }
    },
    mounted(){
        // if(this.preData.title){
            this.form.title=this.preData.title
            this.form.sellPoint=this.preData.sellPoint
            this.form.price=this.preData.price
            this.form.num=this.preData.num
            this.form.desc=this.preData.descs
            this.form.image=this.preData.image
            this.form.cid=this.preData.cid
            this.id=this.preData.id
        // }
    },
    watch:{
        cid(n){
            if(n){
                this.form.cid=n;
            }
        },
        preData(n){
            if(n){
                this.form.title=n.title
                this.form.sellPoint=n.sellPoint
                this.form.price=n.price
                this.form.num=n.num
                this.form.desc=n.desc
                this.form.image=n.image
                this.form.cid=n.cid
                this.id=n.id
            }
        },
        preGuiGe(n){
            this.guigecs=JSON.parse(n.conent);
        }
    },
    components:{
        uploadImg
    },
    props:['innerVisible','outerVisible','cid','leimu','preData','guige','preGuiGe'],

    methods:{
        
        getPicUrl(url){
            console.log(url)
            this.form.image= "mock/"+url.url
        },
        openInner(){
            this.$emit('changeInner',true)
        },
        onSubmit(){
            console.log(this.form,this.guigecs)
            if(this.id){
                //更新功能
                console.log('更新功能')
                this.$api.getUpdateTbItem({...this.form,id:this.id})
                .then(data=>{
                    console.log(data)
                    if(data.status==200){
                        this.$emit('changeOuter',false)
                        //重新请求数据
                        this.$emit('getdata',1)
                        this.$emit('clearCid')
                        this.$message({
                            message:'修改成功',
                            type:'success'
                        })
                    }else{
                        this.$message({
                            message:'修改失败',
                            type:'error'
                        })
                    }
                })
                this.$api.getUpdateItemParamContent({
                    id:this.id,
                    content:JSON.stringify(this.guigecs)
                }).then(data=>{
                    console.log(data)
                })
            }else{
                // // 添加功能
                // console.log('添加功能')
                console.log('提交',this.form)
                this.$api.getInsertTbItem(this.form)
                .then(data=>{
                    if(data.status == 200){
                        this.$emit('changeOuter',false)
                        
                        //把规格参数传递到数据库
                        this.$api.getInsertItemParamContent({id:data.productId,content:JSON.stringify(this.guigecs)})
                        .then(result=>{
                            console.log(result)
                            if(result.status==200){
                                this.$message({
                                    message:'添加成功',
                                    type:'success'
                                })
                            }
                        })
                        //重新请求数据
                        this.$emit('getdata',1)
                        this.$emit('clearCid')
                        //把form中的数据清空
                        this.form={
                            title:'',
                            sellPoint:'',
                            price:'',
                            num:'',
                            desc:'',
                            image:'',
                            cid:''
                        }
                    }
                })
            }
        },
        cancel(){
            console.log('取消')
            this.$emit('changeOuter',false)
        }
    }
}
</script>

<style>
.selectLeiMu{
    margin-left: 10px;
}
</style>